<template>
  <button v-bind="$attrs" v-on="btnListeners">{{ caption }}</button>
</template>

<script>
export default {
    name:"FileChoose",
    props:['caption'],
    computed:{
        btnListeners:function() {
            let vm = this
            return Object.assign({},
            this.$listeners,
            {
                click:function(event) {
                    var index = 2
                    var inputObj = document.createElement('input')
                    inputObj.setAttribute('id','_ef')
                    inputObj.setAttribute('type','file')
                    inputObj.setAttribute('style',"visibility:hidden")
                    inputObj.setAttribute('webkitdirectory',"")
                    inputObj.setAttribute('directory',"")
                    document.body.appendChild(inputObj);
                    inputObj.addEventListener('change',function(e){
                        console.log(e)
                        var obj = document.getElementById("_ef");
                        var files = obj.files;
                        try {
                            
                            vm.$emit('selectItem',files)
                            obj.removeEventListener('change',function(){})
                            document.body.removeChild(obj)
                        } catch (error) {
                            console.error(error)
                        }
                    })
                    inputObj.click();
                }
            })
        }
    }
}
</script>